import React from "react";
import { Card, Grid, Typography } from '@arco-design/web-react';

const { Row, Col } = Grid;
const { Title } = Typography;

interface DriveListProps {
  drives: string[];
  onDriveSelect: (drive: string) => void;
}

const DriveList: React.FC<DriveListProps> = ({ drives, onDriveSelect }) => {
  return (
    <div className="mb-6">
      <Row gutter={16}>
        {drives.map((drive, index) => (
          <Col span={6} key={index} className="mb-4">
            <Card
              hoverable
              onClick={() => onDriveSelect(drive)}
              style={{ cursor: 'pointer' }}
            >
              <div className="flex items-center">
                <div className="mr-2 text-lg">💾</div>
                <div>
                  <div className="font-semibold">{drive}</div>
                  <div className="text-sm text-gray-500">驱动器</div>
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default DriveList;